<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0020)http://www.baidu.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type='text/javascript'
	src='<%=request.getContextPath() %>/dwr/engine.js'> </script>
<script type='text/javascript'
	src='<%=request.getContextPath() %>/dwr/util.js'> </script>
<script type='text/javascript'
	src='<%=request.getContextPath() %>/dwr/interface/hallForm.js'></script>
<script><!--



//获得房间列表(参数房间页数)

var page=1;

var roomEnter=0;

var roomlist;

function show(page) {

  	hallForm.showHall(page,function(data) {

    roomlist=eval("("+data+")");
        
    for(i=0;i<roomlist.size;i++){
                
    		room=roomlist.roomList[i];
    	
    		
    		if(room == undefined || room==null){
    		
    			document.getElementById("room"+i).style.backgroundImage="url(images\/blue_room.png)";
    			
    			document.getElementById("room"+i).style.cursor="default";
				
				//document.getElementById("room"+i).onclick="";
				
				document.getElementById("room"+i+"_hidd").value=0;
				
  				document.getElementById("room"+i+"_lock").style.display="none";
				
    		}else{
    		
    			document.getElementById("room"+i).style.backgroundImage="url(images\/yellow_room.png)";

    			document.getElementById("room"+i).style.cursor="hand";

  				document.getElementById("room"+i+"_roomname").innerHTML = room.name;    
  				
  				document.getElementById("room"+i+"_personNum").innerHTML = room.nowNum+"/"+room.maxNum;
  				
  				if(room.locked==true){
  				
  					document.getElementById("room"+i+"_lock").src="images\/locked.gif";
  				
  				}else{
  				
  					document.getElementById("room"+i+"_lock").src="images/unlocked.gif";

  				}
				
  				document.getElementById("room"+i+"_lock").style.display="";
				    		
    			//document.getElementById("room"+i).onclick=function onclick(event){alert(this.id);};
    			
				document.getElementById("room"+i+"_hidd").value=room.id;
			
    			document.getElementById("room"+i).onclick=function onclick(event){openJoinOtherRoom(this.id);};

    		}    		
    
    }
  
  });
}

//显示创建房间页面

function openCreateRoom(){
    
		document.getElementById("create_div").style.display="block";


}

//隐藏创建房间页面

function closeCreateRoom(){

		document.getElementById("create_div").style.display="none";
		
		//清除列表框
		document.getElementById("roomName").value="";
		document.getElementById("maxPersonSelect").options[0].selected=true;
		document.getElementById("roomPws").value="";
		document.getElementById("checkboxPws").checked=false;
		

}

//创建房间

function createRoom(){

	cRoomName=document.getElementById("roomName").value;
	cMaxPersonSelect=document.getElementById("maxPersonSelect").value;
	cRoomPws=document.getElementById("roomPws").value;
	cCheckFlag=document.getElementById("checkboxPws").checked;
	
  	hallForm.addRoom(cRoomName,cMaxPersonSelect,cCheckFlag,cRoomPws,function(data) {
    //	dwr.util.setValue("nowRoom",data);
  	});
  
  	closeCreateRoom();
  	
  	window.location="game.jsp";
  	
}

//打开加入窗口

function openJoinOtherRoom(id){

	//如果此房间有密码则弹出密码框
	
	//alert(roomlist.roomList[id.replace("room","")].locked);
	
	roomEnter=document.getElementById(id+"_hidd").value;

	if(roomlist.roomList[id.replace("room","")].locked==true){
		
		document.getElementById("join_div").style.display="block";
	
	//没有密码直接进入房间
	
	}else{
	
		hallForm.joinRoom(roomEnter,"",function(data){
			
			if(data=="0"){
		
				window.location="game.jsp";
		
			}else if(data=="-1"){
		
			}else if(data=="-2"){
		
			}else if(data=="-3"){
		
			}else if(data=="-4"){
		
			}else{
		
			}
	
		});		
	
	}

}

//关闭加入窗口

function closeJoinOtherRoom(){

	document.getElementById("join_div").style.display="none";
	
	document.getElementById("enterRoomPws").value="";

}

//加入

function joinOtherRoom(){

    enterRoomPwsV=document.getElementById("enterRoomPws").value;
    
    document.getElementById("enterRoomPws").value="";
    
	hallForm.joinRoom(roomEnter,enterRoomPwsV,function(data){
	
	//alert(data);

		if(data=="0"){
		
			window.location="game.jsp";
		
		}else if(data=="-1"){
		
		}else if(data=="-2"){
		
		}else if(data=="-3"){
		
		}else if(data=="-4"){
		
		}else{
		
		}
	
	});

}

//定时刷新页面

setInterval("show(page);",1000);


--></script>
<style type="text/css">
BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 12px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	COLOR: #65666a;
	LINE-HEIGHT: 20px;
	PADDING-TOP: 0px;
	background-color:#FFFFFF;
}

#all {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	WIDTH: 1024px;
	MARGIN-RIGHT: auto;
	HEIGHT: auto;
}

#left {
	MARGIN-LEFT: auto;
	float: left;
	width: 776px;
	height: auto;
	margin-right: auto;
	background-image:url(images/bg.png);
}

#right {
	MARGIN-LEFT: auto;
	float: left;
	width: 248px;
	height: auto;
	margin-right: auto;
}

#title {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	width: 776px;
	MARGIN-RIGHT: auto;
	height: 20px;
	background-image: url(images/title.png);
}

#memu {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	width: 776px;
	MARGIN-RIGHT: auto;
	height: 60px;
}

#team {
	width: 200px;
	height: 60px;
	float: left;
	margin-bottom: auto;
	background-image: url(images/tools_team.png);
	margin-left: 49px;
}

#speed {
	width: 200px;
	height: 60px;
	float: left;
	margin-bottom: auto;
	margin-left: 10px;
	background-image: url(images/speed_team.png);
}

#create {
	width: 98px;
	height: 60px;
	float: left;
	background-image: url(images/tools_team.png);
	margin-left: 35px;
	background-image: url(images/create.png);
}

#find {
	width: 98px;
	height: 60px;
	float: left;
	margin-left: 10px;
	background-image: url(images/speed_team.png);
	background-image: url(images/find.png);
}

#rooms {
	MARGIN-LEFT: auto;
	OVERFLOW: hidden;
	width: 776px;
	MARGIN-RIGHT: auto;
	height: auto;
}

#rooms_row {
	width: 750px;
	height: 90px;
	margin-top: 20px;
}


.room {
	width: 300px;
	height: 90px;
	float: left;
	margin-left: 50px;
	background-image: url(images/blue_room.png);
}


#userList {
	width: 180px;
	height: 250px;
	OVERFLOW: hidden;
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
}

#playerinfo {
	width: 180px;
	height: 250px;
	OVERFLOW: hidden;
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
	margin-top: 20px;
}
#create_div {
	position:absolute;
	display:none;
	width:303px;
	height:208px;
	z-index:2;
	left: 342px;
	top: 141px;
	background-image:url(images/create_bg.png);

}
#join_div {
	position:absolute;
	display:none;
	width:303px;
	height:208px;
	z-index:2;
	left: 342px;
	top: 141px;
	background-image:url(images/create_bg.png);

}
</style>
</head>

<body>
<div id="create_div">
  <div style="margin-top:30px">
  <table width="224" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2"><div align="center"></div></td>
  </tr>
  <tr>
    <td width="84">房间名称</td>
    <td width="140"><input id="roomName" type="text" size="12"></td>
  </tr>
  <tr>
    <td>最大人数</td>
    <td>
    <select id="maxPersonSelect">
      <option selected>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>房间密码</td>
    <td><input id="roomPws" type="text" size="12"></td>
  </tr>
  <tr>
    <td colspan="2">
	<div align="right">
      <input type="checkbox" id="checkboxPws" value="checkbox">
      创建密码
	</div>
	</td>
  </tr>
  <tr>
    <td colspan="2">
	<div align="center">
      <input type="button" value="创建" onClick="createRoom();">
	  &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="关闭" onClick="closeCreateRoom();">
    </div>
	</td>
  </tr>
</table>
</div>
</div>
<div id="join_div">
  <div style="margin-top:30px">
  
  <table width="224" border="0" align="center" cellpadding="0" cellspacing="0">
  	<tr>
    	<td colspan="2"><div align="center">输入密码</div></td>
  	</tr>
  	<tr>
    	<td width="84">房间密码</td>
    	<td width="140"><input id="enterRoomPws" type="text" size="12"></td>
  	</tr>
  	<tr>
    	<td colspan="2">
			<div align="center">
      			<input type="button" value="进入" onClick="joinOtherRoom();">
	  			&nbsp;&nbsp;&nbsp;&nbsp;
      			<input type="button" value="关闭" onClick="closeJoinOtherRoom();">
    		</div>
		</td>
  	</tr>
   </table>
  
  </div>
</div>

<div id="all">
<div id="left">
<div id="title"></div>
<div id="memu">
<div id="team"  onClick="show(1);"></div>
<div id="speed"></div>
<div id="create" onClick="openCreateRoom();" style="cursor:pointer;"></div>
<div id="find"></div>
</div>
<!--memu-->
<div id="rooms">
<div id="rooms_row">


<div id="room0" class="room">
  <div id="line1" style="margin-top:22px; height:28px;">
    <input id="room0_hidd" type="hidden"/>
  	<div id="room0_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
	<img id="room0_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room0_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room0_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room0_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room0-->


<div id="room1" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room1_hidd" type="hidden"/>
  	<div id="room1_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room1_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room1_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room1_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room1_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room1-->
</div>
<!--rooms_row-->
<div id="rooms_row">


<div id="room2" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room2_hidd" type="hidden"/>
  	<div id="room2_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room2_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room2_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room2_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room2_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room2-->


<div id="room3" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room3_hidd" type="hidden"/>
  	<div id="roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room3_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room3_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room3_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room3_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room3-->
</div>
<!--rooms_row-->
<div id="rooms_row">


<div id="room4" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room4_hidd" type="hidden"/>
  	<div id="room4_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room4_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room4_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room4_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room4_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room4-->


<div id="room5" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room5_hidd" type="hidden"/>
  	<div id="room5_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room5_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room5_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room5_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room5_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room5-->
</div>
<!--rooms_row-->
<div id="rooms_row">


<div id="room6" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room6_hidd" type="hidden"/>
  	<div id="room6_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room6_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room6_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room6_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room6_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room6-->


<div id="room7" class="room">
	<div id="line1" style="margin-top:22px; height:28px;">
    <input id="room7_hidd" type="hidden"/>
  	<div id="room7_roomname" style="margin-left:20px; margin-top:2px; width:250px; height:22px"></div>
  </div>
  <div id="line2" style="margin-top:4px; height:28px;">
  	<div style="width:28px; height:28px; margin-left: 15px;margin-top: 3px;  float:left">
  	<img id="room7_lock" width="24px" height="24px" style="display:none "/>
	</div>
	<div id="room7_creator" style="float:left; height:28px; width:130px;"></div>
	<div id="room7_personNum" style="float:left; height:28px; width:50px;margin-left:0px; margin-top:5px;"></div>
	<div id="room7_status" style="float:left; height:28px; width:50px;"></div>
  </div>
</div><!--room7-->
</div>
<!--rooms_row--></div>
<!--rooms--></div>
<!--left-->
<div id="right">
<div id="userList"></div>
<div id="playerinfo"></div>
</div>
<!--right-->
</div>


</body>
</html>
